<template>
	<view class="page" v-if="pageIsLoad">
		<view class="bg-header">
			<image src="/static/images/login/bg_header.png"></image>
		</view>
		<view class="container">
			<view class="title">{{ '欢迎登录' | lang }}</view>
			<view class="btn-group" v-if="loginType === 'wechat'">
				<button class="btn" @tap="wxLogin" :style="'margin-top:' + (login_wechat && !login_phone ? '300rpx;' : '160rpx;')">
					<image class="icon" src="/static/images/login/ic_wechat.png"></image>
					<text>{{ '微信授权登录' | lang }}</text>
				</button>
				<button class="btn btn-phone" @tap="switchToPhone" v-if="login_phone">
					<text>{{ '手机号登录' | lang }}</text>
				</button>
			</view>
			<view class="form" v-if="loginType === 'phone'">
				<view class="form-item">
					<image class="icon" src="/static/images/login/ic_phone.png"></image>
					<input type="text" @input="inputChange" data-name="phone" maxlength="11" class="input" :placeholder="'手机号' | lang" :value="phone" />
				</view>
				<view class="form-item">
					<image class="icon" src="/static/images/login/ic_pwd.png"></image>
					<input v-if="pwdShow" type="text" @input="inputChange" maxlength="20" data-name="password" class="input" :placeholder="'登录密码' | lang" :value="password" />
					<input v-else type="password" @input="inputChange" maxlength="20" data-name="password" class="input" :placeholder="'登录密码' | lang" :value="password" />
					<image v-if="pwdShow" class="eye" @tap="hidePwd" src="/static/images/login/ic_eye.png">
					</image>
					<image v-else class="eye" @tap="showPwd" src="/static/images/login/ic_eye_open.png"></image>
				</view>
				
				<view class="form-item">
					<button class="btn btn-submit" @tap="doLogin">{{ '确定登录' | lang }}</button>
				</view>
				<view class="form-item" style="justify-content: space-between; color: #04babe; padding:0 36rpx;font-size: 28rpx;">
					<text @tap="toReg">{{ '注册账号' | lang }}</text>
					<text @tap="toReset">{{ '忘记密码' | lang }}</text>
				</view>
			</view>
		
			<view class="agreement">
				{{ '登录即表示同意' | lang }}<text @tap="toDoc('service')">{{ '《服务协议》' | lang }}</text>
			</view>
		</view>
		<view class="bg-footer">
			<image src="/static/images/login/bg_footer.png"></image>
		</view>
	</view>
</template>

<script>
	const app = getApp();
	export default {
		data() {
			return {
				pageIsLoad: false,
				sitecode: '',
				login_phone: 1,
				login_wechat: 0,
				loginType: 'wechat',
				phone: '',
				password: '',
				is_agree: false,
				pwdShow: false,
				backurl: 'pages/index/index'
			}
		},
		onLoad(options) {
			let phone = uni.getStorageSync('phone');
			if (phone) {
				this.setData({
					phone: phone
				})
			}
			if (options.backurl) {
				this.backurl = decodeURIComponent(options.backurl)
			}
			const sitecode = uni.getStorageSync('sitecode')
			this.setData({
				sitecode: sitecode ? sitecode : ''
			})
			
			app.globalData.util.getSetting().then(setting => {
				this.setData({
					login_phone: setting.login_phone,
					login_wechat: setting.login_wechat,
					loginType: setting.login_wechat ? 'wechat' : 'phone',
					pageIsLoad: true
				})
			})
		},
		onShow() {
			uni.setNavigationBarTitle({
				title: this.$lang('登录')
			})
		},
		methods: {
			switchToPhone() {
				this.loginType = 'phone'
			},
			doLogin() {
				let sitecode = this.sitecode;
				let phone = this.phone;
				let password = this.password;
				if (!phone) {
					app.globalData.util.message('请输入手机号')
					return
				}
				if (!password) {
					app.globalData.util.message('请输入登录密码')
					return
				}
				app.globalData.util.request({
					url: '/login/login',
					data: {
						phone: phone,
						password: password,
						sitecode: sitecode
					},
				}).then((res) => {
					uni.setStorageSync('phone', phone);
					uni.setStorageSync('token', res.data.token);
					app.globalData.util.message(res.message, 'success')
					
					uni.redirectTo({
						url: this.backurl,
						fail: function() {
							uni.reLaunch({
								url: '/pages/index/index'
							})
						}
					})
				})
			},

			wxLogin() {
				var sitecode = this.sitecode
				var tuid = uni.getStorageSync('tuid')
				var url = '/web.php/login/h5?sitecode=' + sitecode + '&tuid=' + tuid + '&from=' + encodeURIComponent(this.backurl)
				window.location.href = url
			},
			
			toReg() {
				uni.navigateTo({
					url: '/pages/login/reg'
				})
			},
			
			toReset() {
				uni.navigateTo({
					url: '/pages/login/reset'
				})
			},

			toDoc(type) {
				uni.navigateTo({
					url: '/pages/article/article?type=' + type
				})
			},

			inputChange(e) {
				let name = e.currentTarget.dataset.name;
				let value = e.detail.value;
				this.setData({
					[name]: value
				});
			},

			showPwd() {
				this.setData({
					pwdShow: true
				})
			},

			hidePwd() {
				this.setData({
					pwdShow: false
				})
			},

			goHome() {
				uni.switchTab({
					url: '/pages/index/index'
				})
			}
		}
	};
</script>
<style>
	.page {
		position: absolute;
		width: 100%;
		height: 100%;
		left: 0;
		right: 0;
		bottom: 0;
		background: #f2f8f8;
		z-index: 1;
	}
	.bg-header {
	    position: fixed;
	    left: 0;
	    top: 0;
	    width: 100%;
	    height: 450rpx;
	    z-index: 2;
	}
	.bg-footer {
	    position: fixed;
	    left: 0;
	    bottom: 0;
	    width: 100%;
	    height: 360rpx;
	    z-index: 2;
	}
	.bg-header image, .bg-footer image {
	    width: 100%;
	    height: 100%;
	}
	.container {
	    width: 100%;
	    box-sizing: border-box;
	    position: absolute;
	    left: 0;
	    top: 0;
	    bottom: 0;
	    right: 0;
	    padding: 0 88rpx;
	    z-index: 3;
		min-height: 1100rpx;
	}
	.container .title {
	    font-size: 48rpx;
	    text-align: center;
	    margin-top: 180rpx;
	    letter-spacing: 4rpx;
	    color: #1b1c1c;
	    font-weight: bold;
	}
	.btn-group {
	    margin-top: 200rpx;
	}
	.btn {
	    background: #04babe;
	    border-radius: 50rpx;
	    width: 100%;
	    height: 100rpx;
	    font-size: 36rpx;
	    margin: 0 auto;
	    letter-spacing: 2rpx;
	    display: flex;
	    justify-content: center;
	    align-items: center;
	    color: #fff;
	}
	.btn:active {
	    opacity: 0.8;
	}
	.btn image {
	    width: 64rpx;
	    height: 64rpx;
	    margin-right: 20rpx;
	}
	
	.btn-phone {
		color: #04babe;
		background: #fff;
		border: 2rpx solid #04babe;
		margin-top: 50rpx;
		box-sizing: border-box;
		height: 92rpx;
	}
	
	.btn-submit {
		height: 88rpx;
		margin-top: 40rpx;
	}
	
	.agreement {
	    width: 100%;
	    font-size: 28rpx;
	    color: #999;
	    position: absolute;
	    left: 0;
	    text-align: center;
	    padding: 50rpx 0 50rpx 0;
	    display: flex;
	    align-items: center;
	    justify-content: center;
	    bottom: 100rpx;
	}
	.agreement text {
	    color: #04babe;
	}
	
	.form {
	    margin-top: 140rpx;
	}

	.form .form-item {
		display: flex;
		align-items: center;
		position: relative;
		margin-bottom: 30rpx;
	}

	.form .form-item .input {
		width: 100%;
		border: 4rpx solid #dadede;
		height: 88rpx;
		line-height: 88rpx;
		padding: 0 88rpx;
		background: #fff;
		border-radius: 50rpx;
	}

	.form .form-item .icon {
		width: 32rpx;
		height: 32rpx;
		position: absolute;
		left: 36rpx;
		top: 32rpx;
	}

	.form .form-item .eye {
		width: 32rpx;
		height: 32rpx;
		position: absolute;
		right: 36rpx;
		top: 32rpx;
		z-index: 10;
	}

</style>